<template>
	<view class="monitor">
		<!-- 顶部导航 -->
		<!-- <navBar right-icon="plusempty"  @onRightIcon="onRightIcon"> -->
		<navBar left-icon="plusempty" @onLeftIcon="addStation">
			<template v-slot:center>
				<view class="nav_center">
					<view @click="onLeft" :class="navSelect === 'left' ? 'navActive' : ''">电站</view>
					<view @click="onRight" :class="navSelect === 'right' ? 'navActive' : ''">设备</view>
				</view>
			</template>
		</navBar>
		<!-- 电站 -->
		<view v-if="navSelect === 'left'" class="container_left">
			<view class="top-filter">
				<!-- 全部 -->
				<view class="all_list" @click="openAll">
					<text>全部</text>
					<text style="margin-left: 10rpx">({{ station_list.length }})</text>
					<text class="iconfont icon-s_xialajiantoushixin"></text>
				</view>
				<!-- 全部弹出层 -->
				<uni-popup ref="all_popup" type="top">
					<view class="all-popup-container">
						<view class="btn">
							<view class="btn-item" :class="active == 0 ? 'active' : ''"
								@click="filterData(0, station_list)">
								<text>全部</text>
								<text class="number" v-if="station_list.length">{{station_list.length}}</text>
								<text class="number" v-else>--</text>
							</view>
							<view class="btn-item" :class="active == 1 ? 'active' : ''"
								@click="filterData(1, connecting_list)">
								<text>接入中</text>
								<text class="number" v-if="connecting_list.length">{{connecting_list.length}}</text>
								<text class="number" v-else>--</text>
							</view>
							<view class="btn-item" :class="active == 2 ? 'active' : ''"
								@click="filterData(2, all_offline)">
								<text>全部设备离线</text>
								<text class="number" v-if="all_offline.length">{{all_offline.length}}</text>
								<text class="number" v-else>--</text>
							</view>
							<view class="btn-item" :class="active == 3 ? 'active' : ''"
								@click="filterData(3, some_offline)">
								<text>部分设备离线</text>
								<text class="number" v-if="some_offline.length">{{some_offline.length}}</text>
								<text class="number" v-else>--</text>
							</view>
							<view class="btn-item" :class="active == 4 ? 'active' : ''" @click="filterData(4, alarm)">
								<text>有报警</text>
								<text class="number" v-if="alarm.length">{{alarm.length}}</text>
								<text class="number" v-else>--</text>
							</view>
						</view>
						<view class="bottom">
							<view class="bottom-item">
								无报警
								<text class="number" v-if="no_alarm.length">{{no_alarm.length}}</text>
								<text class="number" v-else>--</text>
							</view>
							<view class="bottom-item">
								通讯正常
								<text class="number" v-if="normal.length">{{normal.length}}</text>
								<text class="number" v-else>--</text>
							</view>
						</view>
					</view>
				</uni-popup>
				<!-- 筛选 -->
				<view class="filter" @click="openFilter">
					<text>筛选</text>
					<text class="iconfont icon-shaixuan"></text>
				</view>
				<!-- 筛选弹出层 -->
				<uni-popup ref="filter_popup" type="top">
					<scroll-view class="filter-popup ">
						<view class="content">
							<view class="content-item capacity">
								<view class="right">
									<!-- 地区选择器 -->
									<uni-data-picker ref="data_picker" placeholder="请选择区域" popup-title="请选择区域"
										:localdata="dataTree" v-model="classes" @nodeclick="onnodeclick">
									</uni-data-picker>
								</view>
							</view>
							<view class="content-item capacity">
								<view class="right">
									<!-- 地区选择器 -->
									<input v-model="searchModel.stationName" placeholder="请输入要查询的电站名称" />
								</view>
							</view>
						</view>
						<view class="btns">
							<button @click="click_filter_btn(0)" class="button" type="warn" plain size="mini">
								取消
							</button>
							<button @click="click_filter_btn(1)" class="button" type="primary" size="mini" plain>
								重置
							</button>
							<button @click="click_filter_btn(2)" class="button" type="primary" size="mini">
								确定
							</button>
						</view>
					</scroll-view>
				</uni-popup>
			</view>
			<!-- 电站列表 -->
			<view v-if="list.length > 0">
				<view v-for="item in list" class="station-item" :key="item.id" @click="goDetailPage(item)">
					<view class="station-content">
						<image :src="item.coverImg" alt="电站" v-if="item.coverImg" />
						<image src="/static/img/default.png" alt="电站" v-else />
						<view class="right-text">
							<view class="title">{{ item.stationName }}</view>
							<view class="status">
								<!-- 无报警 -->
								<view class="status-item" v-if="!item.alarmFlag">
									<text class="green-bg icon-bg">
										<text class="iconfont icon-duigou"></text>
									</text>
									<text class="">无报警</text>
								</view>
								<!-- 有报警 -->
								<view class="status-item" v-if="item.alarmFlag > 0">
									<text class="icon-bg yellow-bg">
										<text class="iconfont icon-baojingzhiwen"></text>
									</text>
									<text class="">报警</text>
								</view>
								<!-- 正常 -->
								<view class="status-item" v-if="item.communicate == 1">
									<text class="green-bg icon-bg">
										<text class="iconfont icon-duigou"></text>
									</text>
									<text class="">通讯正常</text>
								</view>
								<!-- 部分设备离线 -->
								<view class="status-item" v-if="item.communicate == 2">
									<text class="yellow-bg icon-bg">
										<text class="iconfont">!</text>
									</text>
									<text class="">部分设备离线</text>
								</view>
								<!-- 全部设备离线 -->
								<view class="status-item" v-if="item.communicate == 3">
									<text class="icon-bg red-bg">
										<text class="iconfont icon-hengxian"></text>
									</text>
									<text class="">全部设备离线</text>
								</view>
								<!-- 接入中 -->
								<view class="status-item" v-if="item.communicate == 4">
									<text class="yellow-bg icon-bg">
										<text class="iconfont icon-shizhong"></text>
									</text>
									<text class="">接入中</text>
								</view>
							</view>
							<uni-tag inverted class="tag" v-for="ele in item.labelEntities" :key="ele.id"
								:text="ele.labelName" />
							<view class="static">
								<view class="first">
									<text>发电功率</text>
									<!-- 如果有值且有小数 -->
									<view v-if="item.gridPower">
										<text class="integer">{{Number(item.gridPower).toFixed(2)}}</text>
										<text>KW</text>
									</view>
									<!-- 如果没值 -->
									<view v-else>--</view>
								</view>
								<view class="second">
									<text>当日发电量</text>
									<!-- 如果有值且有小数 -->
									<view v-if="item.todayEnergy">
										<text class="integer">{{ Number(item.todayEnergy).toFixed(2) }}</text>
										<text>kWh</text>
									</view>
									<!-- 如果有值且是整数 -->
									<view v-else-if="item.todayEnergy && item.todayEnergy % 1 == 0">
										<text class="integer">{{ item.todayEnergy }}</text>
										<text class="decimal">KWh</text>
									</view>
									<!-- 如果没值 -->
									<view v-else>--</view>
								</view>
								<view class="third">
									<text>装机容量</text>
									<!-- 如果有值且有小数 -->
									<!-- <view v-if="item.capacity && item.capacity % 1 !== 0">
										<text class="integer">{{ Math.trunc(item.capacity) }}</text>
										<text class="decimal">
											{{
												item.capacity
												  .toString()
												  .substring(
													item.capacity.toString().indexOf("."),
													item.capacity.toString().indexOf(".") + 2
												  )
											  }}
										</text>
										<text>KWh</text>
									</view>
									<view v-else-if="item.capacity && item.capacity % 1 == 0">
										<text class="integer">{{ item.capacity }}</text>
										<text class="decimal">KWh</text>
									</view> -->
									<view v-if="item.capacity">
										<text class="integer">{{ item.capacity }}</text>
										<text>KWp</text>
									</view>
									<!-- 如果没值 -->
									<view v-else>--</view>
								</view>
							</view>
						</view>
					</view>
					<view class="update-time">
						<text class="iconfont icon-rili"></text>
						<text>最后更新：</text>
						<text class="time">{{ item.createTime || "--" }}</text>
					</view>
				</view>
				<!-- 点击加载更多 -->
				<uni-load-more v-if="list.length" :status="loadingStatus"></uni-load-more>
			</view>
			<o-empty v-else />
		</view>
		<!-- 设备 -->
		<view v-else class="container_right">
			<equipment :refresh="refresh" :reach="reach" :pushCurrent="pushCurrent" />
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navbar/index.vue"
	import equipment from "./equipment/equipment.vue"
	import {
		getStationQueryList,
		getRegionData
	} from "@/common/api/api.js"
	export default {
		components: {
			navBar,
			equipment,
		},
		data() {
			return {
				dataTree: [],
				classes: "0",
				navSelect: "left",
				station_list: [], //全部数据
				connecting_list: [], //接入中
				all_offline: [], //全部设备离线
				some_offline: [], //部分设备离线
				normal: [], //通讯正常
				alarm: [], //有报警
				no_alarm: [], //无报警
				active: 0, //popup_all激活变量
				list: [], //渲染列表数据
				isShow_filter: false, //筛选弹出控制变量
				searchModel: {
					countryId: "", // 国家Id
					provinceId: "", //省份Id
					cityId: "", //城市Id
				},
				refresh: false, //下拉刷新状态,
				reach: false, //上拉刷新状态
				page: 1,
				loadingStatus: "more",
				count: 0,
				pushCurrent: 1,
			}
		},
		onReady() {},
		//上拉刷新操作
		onReachBottom() {
			this.reach = !this.reach
		},
		onLoad(data) {
			this.getRegion()
			if (data.type && data.type == 1) {
				this.$nextTick(() => {
					this.navSelect = 'right'
					this.pushCurrent = 2
				})
			}
			const token = uni.getStorageSync("Token")
			let params = {
				token: token,
				page: this.page,
				limit: 10,
			}
			this.getStationList(params)
		},
		//下拉刷新操作
		async onPullDownRefresh() {
			if (this.navSelect === "left") {
				const token = uni.getStorageSync("Token")
				let params = {
					token: token,
					page: this.page,
					limit: 10,
				}
				await this.getStationList(params)
			} else {
				this.refresh = true
			}
			await new Promise((resolve) => setTimeout(resolve, 300))
			uni.stopPullDownRefresh()
			this.refresh = false
		},
		watch: {
			reach() {
				this.onReach()
			},
		},
		methods: {
			//区域节点选择
			onnodeclick(e) {
				this.getNodeData(e)
			},
			//获取处理省市区
			async getNodeData(e) {
				this.classes = e.value
				this.$refs.data_picker.show()
				let l = e.level + ""
				//市
				if (l === "undefined") {
					this.$nextTick(() => {
						this.searchModel.cityId = e.value
					})
					return
				}
				const token = uni.getStorageSync("Token")
				let res = await getRegionData({
					token,
					parentId: e.value,
				})
				//省
				if (l.indexOf("-") !== -1) {
					this.searchModel.provinceId = e.value
					let i1 = l.split("-")[0]
					let i2 = l.split("-")[1]
					let level = 0
					res.data.forEach((ele) => {
						let tree = {
							text: ele.areaName,
							value: ele.id,
							children: [],
						}
						this.dataTree[i1].children[i2].children.push(tree)
					})
					return
				}
				//国
				if (l.indexOf("-") === -1) {
					this.searchModel.countryId = e.value
					let level = 0
					res.data.forEach((ele) => {
						let tree = {
							text: ele.areaName,
							value: ele.id,
							level: l + "-" + level++,
							children: [],
						}
						this.dataTree[l].children.push(tree)
					})
				}
			},
			//请求区域地址
			async getRegion() {
				const token = uni.getStorageSync("Token")
				let res = await getRegionData({
					parentId: 0,
					token,
				})
				let level = 0
				res.data.forEach((item) => {
					let tree = {
						text: item.areaName,
						value: item.id,
						level: level++,
						children: [],
					}
					this.dataTree.push(tree)
				})
			},
			//上拉刷新处理
			async onReach() {
				if (this.list.length >= this.count) {
					return (this.loadingStatus = "no-more")
				}
				this.loadingStatus = "loading"
				await new Promise((resolve) => setTimeout(resolve, 300))
				const token = uni.getStorageSync("Token")
				let params = {
					token: token,
					page: this.page + 1,
					limit: 10,
				}
				let res = await getStationQueryList(params)
				if (res.data.length) {
					this.loadingStatus = "more"
					this.page++
					this.list = [...this.list, ...res.data]
				} else {
					this.loadingStatus = "no-more"
				}
			},
			onLeft() {
				this.navSelect = "left"
			},
			onRight() {
				this.navSelect = "right"
			},
			// 左上角加号点击
			addStation() {
				uni.navigateTo({
					url: "/pages/stations/addStation/index?path=monitor",
				})
			},
			goDetailPage(value) {
				uni.navigateTo({
					url: `/pages/stations/index?id=${value.id}&alarm=${value.alarmFlag}&flag=1`,
				})
			},
			chooseOption_system(value) {
				this.btns_system.forEach((item) => {
					if (item.id == value.id) {
						item.active = true
					}
					if (item.id !== value.id) {
						item.active = false
					}
				})
			},
			chooseOption_station(value) {
				this.btns_station.forEach((item) => {
					if (item.id == value.id) {
						item.active = true
					}
					if (item.id !== value.id) {
						item.active = false
					}
				})
			},
			chooseOption_status(value) {
				this.btns_status.forEach((item) => {
					if (item.id == value.id) {
						item.active = true
					}
					if (item.id !== value.id) {
						item.active = false
					}
				})
			},
			chooseOption(value) {
				this.btns_capacity.forEach((item) => {
					if (item.id == value.id) {
						item.active = true
						this.min_capacity = parseInt(item.value.split("~")[0])
						this.max_capacity = parseInt(item.value.split("~")[1])
					}
					if (item.id !== value.id) {
						item.active = false
					}
				})
			},
			click_filter_btn(type) {
				switch (type) {
					// 点击取消
					case 0:
						this.$refs.filter_popup.close()
						break
						// 点击重置
					case 1:
						this.searchModel.countryId = ""
						this.searchModel.provinceId = ""
						this.searchModel.cityId = ""
						this.searchModel.stationName = ""
						break
						//点击确定
					case 2:
						this.handleFilter()
						this.$refs.filter_popup.close()
						break
				}
			},
			filterData(type, value) {
				this.active = type
				this.list = value
			},
			// 筛选下拉确定事件
			async handleFilter() {
				const token = uni.getStorageSync("Token")
				this.searchModel.token = token
				this.getStationList(this.searchModel)
			},
			// 全部下拉筛选
			classifyData(data) {
				this.station_list = this.list //全部数据
				this.normal = data.filter((item) => item.communicate == 1) // 通讯正常
				this.some_offline = data.filter((item) => item.communicate == 2) // 部分设备离线
				this.all_offline = data.filter((item) => item.communicate == 3) // 全部设备离线
				this.connecting_list = data.filter((item) => item.communicate == 4) // 接入中
				this.alarm = data.filter((item) => item.alarmFlag !== 0) // 有报警
				this.no_alarm = data.filter((item) => item.alarmFlag == 0) // 无报警
			},
			async getStationList(params) {
				let res = await getStationQueryList(params)
				this.list = res.data
				console.log(res.data)
				this.classifyData(res.data)
				this.count = res.count
				if (this.list.length >= this.count) {
					this.loadingStatus = "no-more"
				}
			},
			openAll() {
				this.$refs.all_popup.open("top")
			},
			openFilter() {
				this.$refs.filter_popup.open('top')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.add-station {
		font-size: 40rpx;
	}

	/deep/.uni-input-placeholder{
		font-size: 12px;
		color: #ccc;
	}
	.filter-popup {
		height: 60vh;
		background-color: #fff;
		color: $font_color;
		width: 100%;

		.content {
			height: 100%;
			overflow-y: auto;
			padding-top: 100rpx;
			padding-left: 20px;
			padding-right: 20px;

			.system-type {
				margin-bottom: 200rpx;
			}

			.active {
				background-color: #ddedfd !important;
				color: #3f8cf7 !important;
				box-shadow: 0 0 0 2rpx #3f8cf7;
			}

			.content-item {
				border-bottom: 2rpx solid $border_bt;
				padding: 20rpx 0;


				.title {
					font-size: 32rpx;
					color: #000;
					font-weight: 500;
				}

				.inputs {
					display: flex;
					height: 100rpx;
					line-height: 100rpx;

					.uni-input {
						height: 100%;
						text-align: center;
						border-bottom: 2rpx solid $border_bt;

						.uni-input-placeholder {
							color: #999;
						}
					}
				}

				.options-item {
					background-color: #f7f7f7;
					padding: 10rpx 20rpx;
					border-radius: 100rpx;
					display: inline-block;
					margin-right: 10rpx;
					margin-top: 20rpx;
					color: #999;
					font-size: 26rpx;
				}
			}
		}

		.btns {
			background-color: #fff;
			padding-bottom: 20rpx;
			position: absolute;
			bottom: 0rpx;
			left: 0;
			right: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;

			.button {
				border-radius: 100rpx;
				width: 30%;
			}
		}
	}

	// .filter-popup-continer{
	//   padding-top: 200rpx;
	//   height: 100vh;
	//   background-color: #fff;
	//   color: $font_color;
	// }
	.all-popup-container {
		padding-top: 100rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		color: $font_color;

		.btn {
			display: flex;
			flex-wrap: wrap;
		}

		.number {
			font-weight: 500;
			color: #000;
		}

		.active {
			background-color: #ddedfd !important;
			color: #3f8cf7;
			box-shadow: 0 0 0 2rpx #3f8cf7;

			.number {
				color: #3f8cf7;
			}
		}

		.btn-item {
			width: 25%;
			display: inline-block;
			background-color: #f7f7f7;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: left;
			padding: 20rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			min-height: 100rpx;
		}

		.bottom {
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.bottom-item {
				margin-right: 40rpx;

				.number {
					font-weight: bold;
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.monitor {
		color: $font_color;

		.nav_center {
			display: flex;

			&>view {
				padding: 12rpx;
				font-size: 32rpx;
				color: #94c0f1;
			}

			.navActive {
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
			}
		}

		.container_left {
			.o-empty {
				background-color: #f3f4f6 !important;
			}

			.top-filter {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 40rpx;
				background-color: #fff;

				.all_list {
					.iconfont {
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}

			.station-item {
				padding-left: 40rpx;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				background-color: #fff;
				margin-top: 20rpx;

				.update-time {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					padding-top: 20rpx;

					.iconfont {
						margin-right: 10rpx;
						font-size: 24rpx;
					}
				}

				.station-content {
					border-bottom: 2rpx solid $border_bt;
					padding-bottom: 20rpx;
					display: flex;

					image {
						width: 30%;
						height: 200rpx;
						border-radius: 20rpx;
					}

					.right-text {
						width: 70%;

						padding-left: 20rpx;

						.title {
							font-weight: bold;
							color: #000;
							font-size: 32rpx;
							margin-bottom: 20rpx;
						}

						.tag {
							border-radius: 100rpx;
							margin-bottom: 20rpx;
							margin-right: 10rpx;
							display: inline-block;
							padding: 6rpx 20rpx;
						}

						.static {
							display: flex;
							justify-content: space-between;

							text {
								width: 100%;
								font-size: 24rpx;
							}

							.first {
								border-right: 2rpx solid $border_bt;
								margin-right: 20rpx;
								width: 33%;
								display: inline-block;
							}

							.second {
								border-right: 2rpx solid $border_bt;
								margin-right: 20rpx;
								width: 33%;
								display: inline-block;
							}

							.third {
								width: 33%;
								display: inline-block;
							}

							.integer {
								font-size: 32rpx;
								font-weight: bold;
								color: #000;
							}

							.decimal {
								font-size: 24rpx;
							}
						}

						.status {
							display: flex;
							flex-wrap: wrap;
							font-size: 24rpx;

							.status-item {
								display: inline-block;
								margin-bottom: 10rpx;

								.icon-bg {
									border-radius: 50%;
									margin: 0 10rpx;
									width: 28rpx;
									height: 28rpx;
									line-height: 28rpx;
									text-align: center;
									display: inline-block;
								}

								.green-bg {
									background-color: #6ecd73;
								}

								.red-bg {
									background-color: #ee8079;
								}

								.yellow-bg {
									background-color: #f3b762;
								}

								.iconfont {
									color: #fff;
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}
		}

		.container_left:after {
			content: "";
			display: inline-block;
			height: 104rpx;
		}
	}
</style>